<html>
  <head>
    <title>Lanzador de Dados</title>
	<script type="text/javascript">
		function rand(max) {
			return Math.floor(max*Math.random()) + 1 
		}
		
		function updatePage(id,str){
			document.getElementById(id).innerHTML = str;
		}
		
		function rollPressed() {
			roll(4);
			roll(6);
			roll(8);
			roll(10);
			roll(12);
			roll(20);
		
		}
		
		function clearPressed() {
			updatePage("dieAreaD4", "");
			updatePage("dieAreaD6", "");
			updatePage("dieAreaD8", "");
			updatePage("dieAreaD10", "");
			updatePage("dieAreaD12", "");
			updatePage("dieAreaD20", "");
			for (i=0; i<6; i++) {
				document.forms[i].cbDieCount.selectedIndex = 0;
			}
		}
		
		function roll(dieSize)	{
			var frmName = 'frmDieCountD'+dieSize;
			var cbDieCount = document.forms[frmName].cbDieCount;
			var dieCount = cbDieCount.options[cbDieCount.selectedIndex].value;
			var outHtml = "";
			for (i=0;i<dieCount;i++) {
				outHtml += "<img src=\"images/dice/d"+dieSize+"_"+ rand(dieSize) +".jpg\">";
			}
			updatePage("dieAreaD"+dieSize,outHtml);
		}
	</script>
	<link rel="stylesheet" href="lanzaDados.css" type="text/css">
  </head>

  <body style="background: #000000;">
  <input type="button" value="Roll" onClick="javascript:rollPressed()">
  <input type="button" value="Reset" onClick="javascript:clearPressed()">

  <table border="0">
	<tr>
		<td>
		<div>
			<form name="frmDieCountD4">
			<select name="cbDieCount">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
			</select> d4
			</form>

		</div>
		</td><td>
		<div id="dieAreaD4">
			
		</div>
		</td>
	</tr>
	<tr>
		<td>
		<div>
			<form name="frmDieCountD6">
			<select name="cbDieCount">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>

				</select> d6
			</form>

		</div>
		</td><td>
		<div id="dieAreaD6">
			
		</div>
		</td>
	</tr>

	<tr>
		<td>
		<div>
			<form name="frmDieCountD8">
			<select name="cbDieCount">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>

				</select> d8
			</form>

		</div>
		</td><td>
		<div id="dieAreaD8">
			
		</div>
		</td>
	</tr>

	<tr>
		<td>
		<div>
			<form name="frmDieCountD10">
			<select name="cbDieCount">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>

				</select> d10
			</form>

		</div>
		</td><td>
		<div id="dieAreaD10">
			
		</div>
		</td>
	</tr>

	<tr>
		<td>
		<div>
			<form name="frmDieCountD12">
			<select name="cbDieCount">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>

				</select> d12
			</form>

		</div>
		</td><td>
		<div id="dieAreaD12">
			
		</div>
		</td>
	</tr>

	<tr>
		<td>
		<div>
			<form name="frmDieCountD20">
			<select name="cbDieCount">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>

				</select> d20
			</form>

		</div>
		</td><td>
		<div id="dieAreaD20">
			
		</div>
		</td>
	</tr>	
	
  </table>
  <input type="button" value="Roll" onClick="javascript:rollPressed()">
  <input type="button" value="Reset" onClick="javascript:clearPressed()">

  
  </body>
</html>